<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 400px;
            height: 500px;
            border: 1px solid red;
            margin: 0 auto;
            text-align: center;
        }
        img{
            width: 350px;
            height: 350px;
        }
    </style>
</head>
<body>
    <div class="box">
        <p id="info">一共有4张，这是第1张</p>
        <img src="../作业/轮廓定位 - 副本/图片/下载.jpg" alt="">
        <p><button>上一张</button><button>下一张</button></p>
    </div>
    
    <script>
        window.onload = function(){
            var arr=["../作业/轮廓定位 - 副本/图片/下载.jpg","../作业/轮廓定位 - 副本/图片/KunKun.jpg"]
            // 获取按钮
            var btn =document.querySelectorAll("button")
            // 获取图片
            var img = document.querySelector("img")
            // 获取文字
            var info = document.querySelector("#info")
            // 标志数组的下标
            var index =0
            // 下一张
            btn[1].onclick = function(){
                // 
                index++
                // 小于0跳转到末尾
                if(index == 4){
                    index = 0
                }
                // 修改图片的src --对应的数组下标对应的图片
                img.src = arr[index]
                // 修改文字 style --改变样式  innerHTML--改变的内容
                info.innerHTML = "一共有" + arr.length +"张，这是第" + (index+1) + "张。"
            }
                btn[0].onclick = function(){
                    index--
                    if(index <0){
                    index = 3
                }
                img.src = arr[index]
                info.innerHTML = "一共有" +arr.length +"张，这是第" +(index+1)+"张。"
            }

        }
    </script>
</body>
</html>